<template>
	<view class="_tbody">
		<!-- #ifdef H5 -->
		<view class="tou">
			<u-icon name="arrow-left" size="50" @click='onfanhui'></u-icon>
		</view>
		<!-- #endif -->
		<view class="healt_top">
			<view class="healt_top_title">BMI指数计算</view>
			<view class="healt_top_content">
				BMI是国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。
				以下计算适用于我国成年人: 19岁 ~69岁<br>
				不适用人群:运动员、怀孕或哺乳期、重量训练者......
			</view>


		</view>
		<view class="healt_bottom">
			<view class="healt_bottom_t">请输入您的身高、体重:</view>
			<view class="input_wight">
				<view class="input_wight_height">
					身高
				</view>
				<u--input placeholder="请输入您的身高(cm)" border="surround" v-model="valInputH" @change="changeh">
				</u--input>
			</view>
			<view class="input_wight">
				<view class="input_wight_height">
					体重
				</view>
				<u--input placeholder="请输入您的体重(kg)" border="surround" v-model="valInputW" @change="changew">
				</u--input>
			</view>
		</view>
		<u-button type="primary" color='linear-gradient( 120deg ,#00cccc,#33cc66 )' text="计算" @click="Oncount">
		</u-button>
		<view class="hea_count">
			<view class="count_jieguo ">计算结果：</view>
			<view class="count_fanwei_flex">
				<view class="count_fanwei">您的BMI指数为：</view>
				<view class="count_fanwei_color">{{count}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 绑定输入的值 体重
				valInputW: '',
				// 绑定输入的值 身高 
				valInputH: '',
				// 预估的范围
				count: '',


			};
		},
		methods: {
			onfanhui() {
				uni.navigateBack()
			},
			changew(valw) {
				// 拿到 输入的值 
				// 根据输入的值 判断 区间 
				console.log('change', valw);
				this.valInputW = valw
			},
			changeh(valh) {
				// 拿到 输入的值 
				// 根据输入的值 判断 区间 
				console.log('change', valh);
				this.valInputH = valh
			},
			Oncount() {
				var MBI = this.valInputW / ((this.valInputH * 0.01) * (this.valInputH * 0.01))
				this.count = MBI.toFixed(2)
				console.log(this.count);
			}

		}
	}
</script>

<style lang="scss">
	// ._tbody {
	// 	width: 100%;
	// 	height: 100%;
	// 	// background-color: #818181 !important;
	// }
	._tbody {
		background-color: #efefef;
	}

	.tou {
		width: 100%;
		height: 50px;
		background-color: white;
		display: flex;
	}

	.healt_top {
		height: 170px;
		background-color: #fff;
		padding: 20px 10px;
		margin-bottom: 20px;
	}

	// .healt_top_title {}

	.healt_top_content {
		text-indent: 2em;
		font-size: 14px;
		color: #a1a1a1;
		line-height: 30px;
		height: 30px;
		margin-top: 20px;
	}

	// .background-color: {}

	.healt_bottom {
		height: 190px;
		background-color: #fff;
	}

	.healt_bottom_t {
		padding: 20px 10px;
	}

	.checkbox {
		display: flex;
		// justify-content: space-between;
	}

	.gender {
		margin: 10px 20px;
	}

	.input_wight {
		display: flex;
		margin-bottom: 10px;
	}

	.input_wight_height {
		margin: 10px 20px;
	}

	.hea_count {
		margin-top: 20px;
		height: 100px;
		background-color: #fff;
	}

	.count_jieguo {
		padding: 10px;
	}

	.count_fanwei {
		padding: 10px;
		// font-size: 14px;

	}

	.count_fanwei_flex {
		display: flex;
		// justify-content: ;
	}

	.count_fanwei_color {
		padding: 10px;
		color: #33cc66;
	}
</style>
